<template>
  <div class="job-recommend">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <el-form :model="profileForm" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="技能" prop="skills">
          <el-input
            v-model="profileForm.skills"
            type="textarea"
            :rows="2"
            placeholder="请输入技能，多个技能用逗号分隔"
          />
        </el-form-item>
        <el-form-item label="学历要求" prop="education">
          <el-select v-model="profileForm.education" placeholder="请选择学历要求">
            <el-option label="大专" value="大专" />
            <el-option label="本科" value="本科" />
            <el-option label="硕士" value="硕士" />
            <el-option label="博士" value="博士" />
            <el-option label="不限" value="不限" />
          </el-select>
        </el-form-item>
        <el-form-item label="经验要求" prop="experience">
          <el-select v-model="profileForm.experience" placeholder="请选择经验要求">
            <el-option label="1-3年" value="1-3年" />
            <el-option label="3-5年" value="3-5年" />
            <el-option label="5-10年" value="5-10年" />
            <el-option label="10年以上" value="10年以上" />
            <el-option label="不限" value="不限" />
          </el-select>
        </el-form-item>
        <el-form-item label="期望薪资" prop="salaryExpectation">
          <el-input v-model="profileForm.salaryExpectation" placeholder="请输入期望薪资，格式如：20k-30k" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRecommend">获取职位推荐</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 职位推荐列表 -->
    <el-card v-if="jobList.length > 0" class="job-card">
      <template #header>
        <div class="card-header">
          <span>职位推荐</span>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
      <el-table :data="jobList" style="width: 100%">
        <el-table-column prop="职位名字" label="职位名称" min-width="150" />
        <el-table-column prop="公司名字" label="公司名称" min-width="150" />
        <el-table-column prop="工作城市" label="工作城市" width="100" />
        <el-table-column prop="学历要求" label="学历要求" width="100" />
        <el-table-column prop="经验要求" label="经验要求" width="100" />
        <el-table-column prop="薪资待遇" label="薪资待遇" width="120" />
        <el-table-column prop="公司规模" label="公司规模" width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 表单数据
const profileForm = ref({
  skills: '',
  education: '',
  experience: '',
  salaryExpectation: ''
})

// 表单验证规则
const rules = {
  skills: [
    { required: true, message: '请输入技能', trigger: 'blur' }
  ],
  education: [
    { required: true, message: '请选择学历要求', trigger: 'change' }
  ],
  experience: [
    { required: true, message: '请选择经验要求', trigger: 'change' }
  ],
  salaryExpectation: [
    { required: true, message: '请输入期望薪资', trigger: 'blur' },
    { pattern: /^\d+k-\d+k$/, message: '薪资格式必须为xxk-xxk', trigger: 'blur' }
  ]
}

// 职位推荐数据
const jobList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取所有职位列表
const fetchAllJobs = async () => {
  try {
    // 使用默认参数调用推荐接口
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      skills: [''],
      education: '',
      experience: '',
      salaryExpectation: ''
    }

    const response = await axios.post('http://localhost:8081/api/profile/recommend', params)
    if (response.data.code === 200) {
      jobList.value = response.data.data.list
      total.value = response.data.data.total
    }
  } catch (error) {
    console.error('获取职位列表失败:', error)
    ElMessage.error('获取职位列表失败，请稍后重试')
  }
}

// 获取职位推荐
const handleRecommend = async () => {
  try {
    // 构建请求参数
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      skills: profileForm.value.skills.split(',').map(skill => skill.trim()),
      education: profileForm.value.education,
      experience: profileForm.value.experience,
      salaryExpectation: profileForm.value.salaryExpectation
    }

    console.log('请求参数:', params)
    const response = await axios.post('http://localhost:8081/api/profile/recommend', params)
    if (response.data.code === 200) {
      jobList.value = response.data.data.list
      total.value = response.data.data.total
    }
  } catch (error) {
    console.error('获取职位推荐失败:', error)
    if (error.response) {
      console.error('错误响应:', error.response.data)
    }
    ElMessage.error('获取职位推荐失败，请稍后重试')
  }
}

// 获取匹配度标签类型
const getMatchScoreType = (score) => {
  if (score >= 80) return 'success'
  if (score >= 60) return 'warning'
  return 'danger'
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  if (profileForm.value.skills) {
    handleRecommend()
  } else {
    fetchAllJobs()
  }
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  if (profileForm.value.skills) {
    handleRecommend()
  } else {
    fetchAllJobs()
  }
}

onMounted(() => {
  // 页面加载时获取所有职位列表
  fetchAllJobs()
})
</script>

<style scoped>
.job-recommend {
  padding: 20px;
}

.filter-card,
.job-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-select) {
  width: 180px;
}
</style>